<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="平台:" prop="adv_id">
                    <SelectPage v-model="form.adv_id" :url="'/admin/advplatform/selectPage'" show_field="title" placeholder="请选择站点" query_field="title" :multiple="false" />
                </el-form-item>

                <el-form-item label="开户主体:" prop="account_main">
                    <el-input v-model="form.account_main" placeholder="" clearable />
                </el-form-item>
                <el-form-item
                    v-for="(accoun, index) in form.account"
                    :label="'账户组' + index"
                    :key="index"
                    :prop="'account.' + index + '.value'"
                    :rules="{
                    required: true, message: '账号不能为空', trigger: 'blur'
                    }"
                >
                <el-row>
                    <el-col :span="18">
                        <el-input v-model="accoun.value"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" @click.prevent="removeAccount(accoun)">删除</el-button>
                    </el-col>
                </el-row>
                    
                </el-form-item>
                
                <el-form-item>
                    <el-button @click="addAccount">新增账户</el-button>
                </el-form-item>
                
                <el-form-item label="站点名称" prop="site_id">
                    <SelectPage v-model="form.site_id" :url="'/admin/site/selectPage'" show_field="site_name" placeholder="请选择站点" query_field="site_name" />
                </el-form-item>
                <el-form-item label="用户" prop="admin_ids">
                    <SelectPage v-model="form.admin_ids" :url="'/admin/system.admin/selectPage'" show_field="nickname" placeholder="请选择站点" query_field="nickname" :multiple="false" />
                </el-form-item>
                <el-form-item label="开始时间" prop="start_time">
                    <el-date-picker
                        v-model="form.start_time"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="关闭时间" prop="closing_time">
                    <el-date-picker
                        v-model="form.closing_time"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="是否关闭" prop="status">
                    <el-radio-group v-model="form.status" size="mini">
                        <el-radio-button label="正常"></el-radio-button>
                        <el-radio-button label="关闭"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                title: [{ required: true, message: "请输入平台", trigger: "blur" }],
                // account: [{ required: true, message: "请输入账号组", trigger: "blur" }],
                siteid: [{ required: true, message: "请输入域名", trigger: "blur" }],
        
            },
            form: {
                
                start_time : new Date().getTime(),
                closing_time : new Date().getTime() + 24000 * 3600 * 365,
                account: [
                    {
                        value: '',
                    },
                    {
                        value: '',
                    },
                    {
                        value: '',
                    },
                ],
            },
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        removeAccount(item) {
            var index = this.form.account.indexOf(item)
            if (index !== -1) {
            this.form.account.splice(index, 1)
            }
        },
        addAccount() {
            this.form.account.push({
            value: '',
            // key: Date.now()
            });
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    if(this.form.start_time == null){
                        this.$message.error(`请填写开始时间`)
                        return false
                    }
                    if(this.form.status == '关闭'){ 
                        if(this.form.closing_time == null){
                            this.$message.error(`请填写关闭时间`)
                            return false
                        }
                        this.$confirm('是否确定关闭广告账户?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                                this.form.closing_time = Date.parse(this.form.closing_time);
                                this.form.start_time = Date.parse(this.form.start_time);
                                this.$emit('submitForm', this.form)
                            }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });          
                        });
                    }else{
                        this.form.closing_time = Date.parse(this.form.closing_time);
                        this.form.start_time = Date.parse(this.form.start_time);
                        this.$emit('submitForm', this.form)
                    }
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
    }
}
</script>
